<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>越权</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <link rel="stylesheet" href="../../plugins/fontawesome-free/css/all.min.css">
  <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <link rel="stylesheet" href="../../dist/css/adminlte.min.css">
</head>
<body class="hold-transition dark-mode sidebar-mini layout-fixed layout-navbar-fixed layout-footer-fixed">
<div class="wrapper">
  <nav id="Navbar" class="main-header navbar navbar-expand navbar-dark"></nav>
  <aside id="Container" class="main-sidebar sidebar-dark-primary elevation-4"></aside>
  <div class="content-wrapper" id="Wrapper">
    <section class="content-header" id="WrapperHeader"></section>
    <section class="content">
      <div class="container-fluid">
        <div id="notice"></div>
        <div class="card card-primary card-outline">
          <div class="card-header">
            <h3 class="card-title">垂直越权</h3>
          </div>
          <div class="card-body">
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">后台登录</h3>
              </div>
              <form action="" onsubmit="return false" id="Login">
                <div class="card-body">
                  <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" name="username" id="username" placeholder="Enter username">
                  </div>
                  <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" name="password" id="password" placeholder="Password">
                  </div>
                </div>
                <div class="card-footer">
                  <button type="submit" class="btn btn-primary" onclick="doLogin()">登录</button>
                </div>
              </form>
            </div>
          </div>
          <div class="card-body">
            <table class="table table-bordered">
              <thead>
              <tr>
                <th>用户名</th>
                <th>电话</th>
                <th>地址</th>
              </tr>
              </thead>
              <tbody id="comments"></tbody>
            </table>
          </div>
        </div>
        <div class="card card-primary card-outline" id="showSource">
          <div class="card-header">
            <h3 class="card-title">源代码&amp;提示</h3>
          </div>
          <div class="card-body">
            <div>
              <p>在这个页面中，我们可以看到一个登录表单，我们可以通过这个表单登录到后台，然后查看用户信息。</p>
              <p>我们可以通过修改cookie来越权，查看所用用户信息。</p>
              <p><strong>Servlet 实现</strong></p>
              <pre><code>&#x20;&#x20;&#x20;&#x20;&commat;&#x41;&#x70;&#x69;&lpar;&lcub;&#x52;&#x65;&#x71;&#x75;&#x65;&#x73;&#x74;&#x4D;&#x65;&#x74;&#x68;&#x6F;&#x64;&#x54;&#x79;&#x70;&#x65;&period;&#x47;&#x45;&#x54;&rcub;&rpar;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x70;&#x75;&#x62;&#x6C;&#x69;&#x63;&#x20;&#x4D;&#x61;&#x70;&lt;&quest;&comma;&quest;&gt;&#x20;&#x67;&#x65;&#x74;&#x55;&#x73;&#x65;&#x72;&#x49;&#x6E;&#x66;&#x6F;&#x41;&#x6C;&#x6C;&lpar;&#x48;&#x74;&#x74;&#x70;&#x53;&#x65;&#x72;&#x76;&#x6C;&#x65;&#x74;&#x52;&#x65;&#x71;&#x75;&#x65;&#x73;&#x74;&#x20;&#x72;&#x65;&#x71;&#x75;&#x65;&#x73;&#x74;&comma;&#x20;&#x48;&#x74;&#x74;&#x70;&#x53;&#x65;&#x72;&#x76;&#x6C;&#x65;&#x74;&#x52;&#x65;&#x73;&#x70;&#x6F;&#x6E;&#x73;&#x65;&#x20;&#x72;&#x65;&#x73;&#x70;&#x6F;&#x6E;&#x73;&#x65;&rpar;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x48;&#x61;&#x73;&#x68;&#x4D;&#x61;&#x70;&lt;&#x53;&#x74;&#x72;&#x69;&#x6E;&#x67;&comma;&#x20;&#x4F;&#x62;&#x6A;&#x65;&#x63;&#x74;&gt;&#x20;&#x6D;&#x61;&#x70;&#x20;&equals;&#x20;&#x63;&#x68;&#x65;&#x63;&#x6B;&#x4C;&#x6F;&#x67;&#x69;&#x6E;&lpar;&#x72;&#x65;&#x71;&#x75;&#x65;&#x73;&#x74;&comma;&#x20;&#x72;&#x65;&#x73;&#x70;&#x6F;&#x6E;&#x73;&#x65;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x62;&#x6F;&#x6F;&#x6C;&#x65;&#x61;&#x6E;&#x20;&#x69;&#x73;&#x4C;&#x6F;&#x67;&#x69;&#x6E;&#x20;&equals;&#x20;&lpar;&#x62;&#x6F;&#x6F;&#x6C;&#x65;&#x61;&#x6E;&rpar;&#x20;&#x6D;&#x61;&#x70;&period;&#x67;&#x65;&#x74;&lpar;&quot;&#x6C;&#x6F;&#x67;&#x69;&#x6E;&#x53;&#x74;&#x61;&#x74;&#x75;&#x73;&quot;&rpar;&semi;&NewLine;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x48;&#x61;&#x73;&#x68;&#x4D;&#x61;&#x70;&lt;&#x53;&#x74;&#x72;&#x69;&#x6E;&#x67;&comma;&#x20;&#x4F;&#x62;&#x6A;&#x65;&#x63;&#x74;&gt;&#x20;&#x64;&#x61;&#x74;&#x61;&#x20;&equals;&#x20;&#x6E;&#x65;&#x77;&#x20;&#x48;&#x61;&#x73;&#x68;&#x4D;&#x61;&#x70;&lt;&gt;&lpar;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x64;&#x61;&#x74;&#x61;&period;&#x70;&#x75;&#x74;&lpar;&quot;&#x6C;&#x6F;&#x67;&#x69;&#x6E;&#x53;&#x74;&#x61;&#x74;&#x75;&#x73;&quot;&comma;&#x20;&#x69;&#x73;&#x4C;&#x6F;&#x67;&#x69;&#x6E;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x69;&#x66;&#x20;&lpar;&excl;&#x69;&#x73;&#x4C;&#x6F;&#x67;&#x69;&#x6E;&rpar;&#x20;&#x72;&#x65;&#x74;&#x75;&#x72;&#x6E;&#x20;&#x64;&#x61;&#x74;&#x61;&semi;&NewLine;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x53;&#x74;&#x72;&#x69;&#x6E;&#x67;&#x20;&#x75;&#x73;&#x65;&#x72;&#x20;&equals;&#x20;&quot;&quot;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x43;&#x6F;&#x6F;&#x6B;&#x69;&#x65;&lsqb;&rsqb;&#x20;&#x63;&#x6F;&#x6F;&#x6B;&#x69;&#x65;&#x73;&#x20;&equals;&#x20;&#x72;&#x65;&#x71;&#x75;&#x65;&#x73;&#x74;&period;&#x67;&#x65;&#x74;&#x43;&#x6F;&#x6F;&#x6B;&#x69;&#x65;&#x73;&lpar;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x66;&#x6F;&#x72;&#x20;&lpar;&#x43;&#x6F;&#x6F;&#x6B;&#x69;&#x65;&#x20;&#x63;&#x20;&colon;&#x20;&#x63;&#x6F;&#x6F;&#x6B;&#x69;&#x65;&#x73;&rpar;&#x20;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x69;&#x66;&#x20;&lpar;&#x63;&period;&#x67;&#x65;&#x74;&#x4E;&#x61;&#x6D;&#x65;&lpar;&rpar;&period;&#x63;&#x6F;&#x6D;&#x70;&#x61;&#x72;&#x65;&#x54;&#x6F;&lpar;&quot;&#x75;&#x73;&#x65;&#x72;&quot;&rpar;&#x20;&equals;&equals;&#x20;&#x30;&rpar;&#x20;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x75;&#x73;&#x65;&#x72;&#x20;&equals;&#x20;&#x63;&period;&#x67;&#x65;&#x74;&#x56;&#x61;&#x6C;&#x75;&#x65;&lpar;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&rcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&rcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x64;&#x61;&#x74;&#x61;&period;&#x70;&#x75;&#x74;&lpar;&quot;&#x64;&#x61;&#x74;&#x61;&quot;&comma;&#x20;&#x75;&#x69;&#x73;&#x69;&period;&#x66;&#x69;&#x6E;&#x64;&#x41;&#x6C;&#x6C;&lpar;&#x75;&#x73;&#x65;&#x72;&comma;&#x20;&lpar;&lpar;&#x55;&#x73;&#x65;&#x72;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&rpar;&#x20;&#x6D;&#x61;&#x70;&period;&#x67;&#x65;&#x74;&lpar;&quot;&#x75;&#x73;&#x65;&#x72;&quot;&rpar;&rpar;&period;&#x67;&#x65;&#x74;&#x49;&#x64;&lpar;&rpar;&rpar;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x72;&#x65;&#x74;&#x75;&#x72;&#x6E;&#x20;&#x64;&#x61;&#x74;&#x61;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&rcub;</code></pre>
              <p><strong>Server 实现</strong></p>
              <pre><code>&#x20;&#x20;&#x20;&#x20;&#x70;&#x75;&#x62;&#x6C;&#x69;&#x63;&#x20;&#x4D;&#x61;&#x70;&lt;&#x53;&#x74;&#x72;&#x69;&#x6E;&#x67;&comma;&#x4F;&#x62;&#x6A;&#x65;&#x63;&#x74;&gt;&#x20;&#x66;&#x69;&#x6E;&#x64;&#x41;&#x6C;&#x6C;&lpar;&#x53;&#x74;&#x72;&#x69;&#x6E;&#x67;&#x20;&#x74;&#x79;&#x70;&#x65;&comma;&#x20;&#x69;&#x6E;&#x74;&#x20;&#x69;&#x64;&rpar;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x48;&#x61;&#x73;&#x68;&#x4D;&#x61;&#x70;&lt;&#x53;&#x74;&#x72;&#x69;&#x6E;&#x67;&comma;&#x20;&#x4F;&#x62;&#x6A;&#x65;&#x63;&#x74;&gt;&#x20;&#x64;&#x61;&#x74;&#x61;&#x20;&equals;&#x20;&#x6E;&#x65;&#x77;&#x20;&#x48;&#x61;&#x73;&#x68;&#x4D;&#x61;&#x70;&lt;&gt;&lpar;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x4C;&#x69;&#x73;&#x74;&lt;&#x55;&#x73;&#x65;&#x72;&#x49;&#x6E;&#x66;&#x6F;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&gt;&#x20;&#x61;&#x6C;&#x6C;&#x20;&equals;&#x20;&#x75;&#x69;&#x64;&#x69;&period;&#x66;&#x69;&#x6E;&#x64;&#x41;&#x6C;&#x6C;&lpar;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x66;&#x6F;&#x72;&#x20;&lpar;&#x55;&#x73;&#x65;&#x72;&#x49;&#x6E;&#x66;&#x6F;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&#x20;&#x75;&#x73;&#x65;&#x72;&#x49;&#x6E;&#x66;&#x6F;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&#x20;&colon;&#x20;&#x61;&#x6C;&#x6C;&rpar;&#x20;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x69;&#x66;&#x20;&lpar;&#x74;&#x79;&#x70;&#x65;&period;&#x65;&#x71;&#x75;&#x61;&#x6C;&#x73;&lpar;&quot;&#x61;&#x64;&#x6D;&#x69;&#x6E;&quot;&rpar;&rpar;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x64;&#x61;&#x74;&#x61;&period;&#x70;&#x75;&#x74;&lpar;&#x75;&#x64;&#x69;&period;&#x66;&#x69;&#x6E;&#x64;&#x42;&#x79;&#x49;&#x44;&lpar;&#x6E;&#x65;&#x77;&#x20;&#x55;&#x73;&#x65;&#x72;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&lpar;&#x75;&#x73;&#x65;&#x72;&#x49;&#x6E;&#x66;&#x6F;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&period;&#x67;&#x65;&#x74;&#x55;&#x73;&#x65;&#x72;&#x49;&#x44;&lpar;&rpar;&rpar;&rpar;&period;&#x67;&#x65;&#x74;&#x55;&#x73;&#x65;&#x72;&#x6E;&#x61;&#x6D;&#x65;&lpar;&rpar;&comma;&#x20;&#x75;&#x73;&#x65;&#x72;&#x49;&#x6E;&#x66;&#x6F;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&rcub;&#x20;&#x65;&#x6C;&#x73;&#x65;&#x20;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x69;&#x66;&#x20;&lpar;&#x69;&#x64;&#x20;&equals;&equals;&#x20;&#x75;&#x73;&#x65;&#x72;&#x49;&#x6E;&#x66;&#x6F;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&period;&#x67;&#x65;&#x74;&#x55;&#x73;&#x65;&#x72;&#x49;&#x44;&lpar;&rpar;&rpar;&lcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x64;&#x61;&#x74;&#x61;&period;&#x70;&#x75;&#x74;&lpar;&#x75;&#x64;&#x69;&period;&#x66;&#x69;&#x6E;&#x64;&#x42;&#x79;&#x49;&#x44;&lpar;&#x6E;&#x65;&#x77;&#x20;&#x55;&#x73;&#x65;&#x72;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&lpar;&#x69;&#x64;&rpar;&rpar;&period;&#x67;&#x65;&#x74;&#x55;&#x73;&#x65;&#x72;&#x6E;&#x61;&#x6D;&#x65;&lpar;&rpar;&comma;&#x20;&#x75;&#x73;&#x65;&#x72;&#x49;&#x6E;&#x66;&#x6F;&#x45;&#x6E;&#x74;&#x69;&#x74;&#x79;&rpar;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x62;&#x72;&#x65;&#x61;&#x6B;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&rcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&rcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&rcub;&NewLine;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x20;&#x72;&#x65;&#x74;&#x75;&#x72;&#x6E;&#x20;&#x64;&#x61;&#x74;&#x61;&semi;&NewLine;&#x20;&#x20;&#x20;&#x20;&rcub;</code></pre>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <footer class="main-footer"></footer>
  <script src="../../dist/js/templateHandle.js"></script>
  <script>
    setWrapperHeader("越权", ["垂直越权"]);
  </script>
  <script src="../../plugins/jquery/jquery.min.js"></script>
  <script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../../plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
  <script src="../../dist/js/adminlte.js"></script>
  <script>
  const notice_dom = $("#notice")[0];
  const out_msg = "<a href='#' onClick='loginOut()' style='color: #6db3ff;'>点击登出</a>";
  if (document.cookie!=='' && window.localStorage.getItem('user_name')!==null&&document.cookie.indexOf("token")!==-1){
    notice_dom.innerHTML = generateNote("登录成功！欢迎 " + window.localStorage.getItem('user_name') + " 修改个人信息。" + out_msg);
    showForm(2)
    showInfo();
  } else {
    showForm(1)
  }
  function doLogin(){
    let data = {
      username: $("#username")[0].value,
      password: $("#password")[0].value,
    }
    if (data.username.length <= 0 && data.username.length <= 0)return false;
    $.post({
      url: `${project_name}csrf/loginWithCookie`,
      data,
      dataType: "json",
      success(resp){
        if(resp["loginStatus"]){
          showInfo();
          showForm(2);
        } else {
          notice_dom.innerHTML = generateNote("登录失败，账号或者密码错误！");
        }
      }
    })
  }

  function showInfo(){
    $.get({
      url: `${project_name}csrf/showInfo`,
      xhrFields: {
        withCredentials: true
      },
      success(resp) {
        if (!resp['loginStatus'])return;
        window.localStorage.setItem('user_name', resp['userName']);
        notice_dom.innerHTML = generateNote("登录成功！欢迎 " +  resp['userName'] + " 查看用户信息。" + out_msg);
        getUserInfos();
      }
    })
  }

  function showForm(index){
    let forms = $("#Wrapper > section.content > div > div.card.card-primary.card-outline > div:nth-child(n+2)")
    forms[0].style  = index === 1 ? "display:block" : "display:none"
    forms[1].style  = index === 2 ? "display:block" : "display:none"
  }

  function loginOut(){
    document.cookie = '';
    showForm(1);
    notice_dom.innerHTML='';
    $.get({
      url: `${project_name}csrf/loginOut`,
      xhrFields: {
        withCredentials: true
      },
      success(resp) {
        location.reload();
      }
    })
  }

  function getUserInfos(){
    $.get({
      url: `${project_name}csrf/getUserInfoAll`,
      success(resp) {
        if (!resp['loginStatus'])return;
        let g = '';
        let data_list = resp["data"];
        for(let item in data_list){
          let data = data_list[item];
          g += `<tr>
                  <td>${item}</td>
                  <td>${data.phone}</td>
                  <td>${data.address}</td>
                </tr>`
        }
        $("#comments")[0].innerHTML = g;
      }
    })
  }
</script>
</body>
</html>